<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="优秀施工">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 搜索 -->
		<view class="liucheng d-flex align-items justify-content-center">
			<view class="search">
				<u-search placeholder="请输入要查询的内容" placeholderColor="#C9CDD4" :actionStyle="actionStyle" shape="square"
					v-model="keyword" @search="search" @custom="custom" @clear="clear"></u-search>
			</view>
		</view>
		<!-- <view class="tabs_change d-flex align-items">
			<view class="jf-w" :current="current" @click="chage_tabs(jianfang)"
				v-for="(jianfang,index) in jianfang_lists" :key="index">
				<view :class="current == index ? 'jf-w-t-xz' : 'jf-w-t'">{{jianfang.tabs_name}}</view>
				<view :class="current == index ? 'line' : ''"></view>
			</view>
		</view> -->
		<!-- 筛选角色 -->
		<view class="d-flex align-items justify-content-space-between juese">
			<view class="d-flex align-items">
				<view :class="juese_current == juese.id ? 'juese_name-xz' : 'juese_name'" :current="juese_current"
					@click="jueseClick(juese)" v-for="(juese,index1) in jueseItem" :key="index1">{{juese.name}}</view>
			</view>
			<view class="d-flex align-items">
				<!-- 选择地区 -->
				<view class="d-flex align-items" style="margin-right: 30rpx;">
					<view class="diqu_sx"  @click="chooseCity">{{adress}}</view>
					<image class="sanjiao" src="../static/del_img.png" @click="del_data" mode="widthFix" v-if="adress !== '地区'"></image>
					<image class="sanjiao" src="../static/down.png" mode="widthFix" v-else></image>
				</view>
				<!-- 选择工种 -->
				<view class="d-flex align-items" @click="show_gongzhong = true">
					<view class="diqu_sx">{{gongzhong}}</view>
					<image class="sanjiao" src="../static/shaixuan.png" mode="widthFix"></image>
				</view>
			</view>

		</view>
		<view class="scroll-view-item_H" v-for="(company,index) in companyLists" @click="go_shigongdui(company)" :key="index">
			<view class="d-flex gs-list">
				<view class="">
					<image class="touxiang-img" v-if="company.shigong_pic_first" :src="company.shigong_pic_first" mode=""></image>
					<image class="touxiang-img" v-else src="/static/my/moren.png" mode=""></image>
				</view>
				
				<view class="">
					<view class="name-t">{{company.shigong_contact}}</view>
					<view class="company-t d-flex align-items" v-if="company.shigong_cityname">
						<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
						{{company.shigong_cityname}} {{company.shigong_areaname}}
					</view>
				</view>
			</view>
			<view class="geyan">{{company.instr == null ? '' : company.instr}}</view>
			<view class="type-list d-flex align-items">
				<view class="type-list-m" v-if="company.shigonggongzhongname">{{company.shigonggongzhongname}}</view>
			</view>
		</view>
		<!-- 选择市区筛选 -->
		<u-picker :show="showcity" ref="uPicker" @cancel="showcity=false" :columns="columns" @confirm="confirm"
			@change="changeHandler" keyName="t_name"></u-picker>
		<!-- 请选择工种 -->
		<u-picker :show="show_gongzhong" @cancel="show_gongzhong = false" :columns="columns_gongzhong"
			@confirm="confirm_gongzhong" keyName="label"></u-picker>
			
		<!-- 客服组件 -->
		<movable-area class="movableArea">
			<movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction"
				:damping="damping" @change="onChange" @touchend="onTouchend">
				<image src="../../static/index/xinxi_icon.png" mode="widthFix" class="iconImage"></image>
			</movable-view>
		</movable-area>
		<!-- 身份信息选择弹窗 -->
		<view class="">
			<u-popup :show="show_info" closeable mode="center" @close="show_info=false" :round="10">
				<view class="shenfen_info">
					<view class="shenfen_tit">请选择身份信息</view>
					<view class="u-radio_shenfen">
						<u-radio-group iconPlacement="right" borderBottom size="38rpx" shape="circle"
							v-model="radio_juese_value" placement="column">
							<u-radio :customStyle="{height:'80rpx',}" v-for="(item, index) in jueselists" :key="index"
								:label="item.name" @change="radioChange_info(item,index)" :name="item.id">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		tree
	} from '@/api/citys.js'
	import {getgongzhong} from '@/api/user.js'
	import {
		userinfolist,
		getmygroup
	} from '@/api/user.js'
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					color: '#FF6400',
					fontSize: '30rpx',
				},
				current: 0,
				adress: '地区',
				showcity: false,
				shengname: '',
				cityname: '',
				shiname: '',
				columns: [],
				quname: '',
				shengid: '',
				shiid: '',
				quid: '',
				show_gongzhong: false,
				gongzhong: '选择工种',
				gongzhong_id: '', //选择工种id
				columns_gongzhong: [], //选择工种数组
				// jianfang_lists: [{
				// 	tabs_name: '建房',
				// 	id: 0
				// }, {
				// 	tabs_name: '装修',
				// 	id: 1
				// }],
				juese_current: 1,
				jueseItem: [
					{
						id: 1,
						name: '个人',
					},{
						id: 2,
						name: '队伍',
					}
				],
				companyLists: [],
				page:1,
				limit:7,
				
				
				
				
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				jueselists:[],
				radio_juese_value: '',
				show_info: false,
			}
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000)
				}
			})
		},
		async onLoad() {
			await this.getProvinces()
			this.get_gongzhong_list()
			this.get_inforlist()
		},
		onShow(){
			this.get_role();
		},
		onReachBottom() {
			this.page++
			this.get_inforlist()
		},
		onPullDownRefresh() {
			this.page = 1
			this.get_inforlist()
		},
		methods: {
			// 获取信息列表
			get_inforlist() {
				var data = {
					page: this.page,
					limit: this.limit,
					shigong_level: this.juese_current,
					city: this.shiid,
					area_id: this.quid,
					group_id: '2',
					key: this.keyword,
					shigong_gongzhong_id: this.gongzhong_id,
				}
				userinfolist(data).then(res => {
					console.log("获取信息列表", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.companyLists = res.data.list
						} else {
							this.companyLists = this.companyLists.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			search(e) {
				console.log("eaa", e);
				this.get_inforlist()
				this.page = 1
			},
			custom(){
				this.get_inforlist()
				this.page = 1
			},
			clear(){
				this.get_inforlist()
				this.page = 1
			},
			chage_tabs(e) {
				console.log("建房信息系申诉书", e);
				this.current = e.id
			},
			jueseClick(e) {
				this.juese_current = e.id
				this.get_inforlist()
				this.page = 1
			},
			go_juese_detail() {
				uni.navigateTo({
					url: '/pagesA/index_top/juese_detail'
				})
			},
			go_shigongdui(e) {
				uni.navigateTo({
					url: '/pagesA/index_top/shigongdui_detail?id=' + e.group_id + '&user_id=' + e.user_id
				})
			},
			chooseCity() {
				console.log("eeeee", this.columns);
				this.showcity = true
			},
			// 省市区
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columns[0][index].children)
					picker.setColumnValues(2, this.columns[0][index].children[0].children)
				}
				if (columnIndex === 1) {
					console.log(e, indexs);
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, this.columns[0][indexs[0]].children[indexs[1]].children)
				}
				console.log("columnIndex", columnIndex);
			},
			// 获取省市县接口数据
			async getProvinces() {
				var data = {
					pid: 0
				}
				await tree(data).then(res => {
					console.log("选择了第几个", res);
					if (res.code == 1) {
						this.columns[0] = res.data
						this.columns[1] = res.data[0].children
						this.columns[2] = res.data[0].children[0].children
					}
				})
			},
			confirm(e) {
				console.log("点击确认城市", e);
				this.shengname = e.value[0].name
				this.cityname = e.value[1].name
				this.shiname = e.value[2].name
				this.shengid = e.value[0].id
				this.shiid = e.value[1].id
				this.quid = e.value[2].id
				this.adress = this.cityname + '/' + this.shiname
				this.showcity = false
				this.get_inforlist()
				this.page = 1
			},
			// 清楚地区筛选项
			del_data(){
				this.shiid = ''
				this.quid = ''
				this.adress = '地区'
				this.get_inforlist()
				this.page = 1
			},
			// 获取工种列表
			get_gongzhong_list() {
				getgongzhong({}).then(res => {
					console.log("获取屋顶形式", res);
					if (res.code == 1) {
						let a = []
						a.push({
							id: 0,
							label: '全部'
						})
						for (let s of res.data.gongzhong_list) {
							a.push({
								id: s.id,
								label: s.name
							})
						}
						this.columns_gongzhong = [a]
					}
				})
			},
			confirm_gongzhong(e) {
				console.log("需要工种列表", e);
				this.gongzhong = e.value[0].label
				if(e.value[0].id == 0){
					this.gongzhong = '选择工种'
				}
				this.gongzhong_id = e.value[0].id
				this.show_gongzhong = false
				this.get_inforlist()
				this.page = 1
			},
			
			
			
			
			// 这个是拖动客服按钮
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			// 这个点击客服按钮
			onTouchend(e) {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
					console.log(this.x, this.y)
				}, 100)
				if(this.jueselists) {
					this.radio_juese_value = 0;
					this.show_info = true
				}else {
					uni.showToast({
						title:'请添加角色信息',
						icon:'none'
					})
				}
			},
			// 信息发布选择身份信息弹窗
			radioChange_info(n, idx) {
				console.log("选择第几个身份", n, idx);
				if(n.status == 0){
					uni.showToast({
						title:'角色信息正在审核中，请耐心等待！',
						icon:'none'
					})
				}
				if(n.status == 1){
					uni.navigateTo({
						url: '/pagesB/info_fabu/guzhu_info_fabu?id=' + n.id
					})
				}
				if(n.status == 2){
					uni.showToast({
						title:'角色信息正在审核失败，请点击上方角色文字框去修改！',
						icon:'none'
					})
				}
				this.show_info = false;
				this.radio_juese_value = "";
			},
			
			// 获取顶部添加之后的角色信息列表
			get_role() {
				getmygroup({}).then(res => {
					console.log("获取顶部角色列表", res);
					if (res.code == 1) {
						this.jueselists = res.data.grouplist
					}
				})
			},
		}
	}
</script>

<style>
	.dwImg {
		width: 32rpx;
		display: block;
	}

	.company-t {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.name-t {
		font-size: 32rpx;
		font-weight: 600;
		color: #1C2023;
		margin-left: 18rpx;
	}

	.touxiang-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: block;
	}

	.gs-list {
		width: 640rpx;
		margin: auto;
		padding-top: 30rpx;
	}

	.geyan {
		width: 640rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #333333;
		margin: auto;
		margin-top: 25rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.scroll-view-item_H {
		width: 690rpx;
		padding-bottom: 30rpx;
		border-radius: 10rpx;
		background: #fff;
		margin: 20rpx auto;
	}

	.diqu_sx {
		font-size: 28rpx;
		color: #1A1A1A;
		margin-right: 6rpx;
	}

	.juese_name-xz {
		font-size: 30rpx;
		font-weight: normal;
		color: #FF6400;
		margin-right: 40rpx;
	}

	.juese_name {
		font-size: 30rpx;
		font-weight: normal;
		color: #1D2129;
		margin-right: 40rpx;
	}

	.sanjiao {
		width: 40rpx;
		display: block;
	}

	.juese {
		width: 690rpx;
		margin: 30rpx auto;
	}


	.company-t {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.type-list {
		margin-left: 24rpx;
		margin-top: 20rpx;
	}

	.type-list-m {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #545454;
		border-radius: 4.5px;
		background: #F5F5F5;
		margin-right: 15rpx;
	}

	.line {
		width: 48rpx;
		height: 4rpx;
		margin: auto;
		margin-top: 0rpx;
		background: #FF6400;
	}

	.jf-w-t-xz {
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		color: #FF6400;
	}

	.jf-w-t {
		font-size: 32rpx;
		font-weight: normal;
		text-align: center;
		color: #1D2129;
	}

	.jf-w {
		width: 50%;
		text-align: center;
		line-height: 80rpx;
		padding-top: 20rpx;
	}

	.tabs_change {
		width: 750rpx;
		height: 102rpx;
		background-color: #fff;
		margin-top: 2rpx;
	}

	.search {
		width: 690rpx;
		margin: auto;
	}

	.liucheng {
		width: 750rpx;
		height: 102rpx;
		background-color: #fff;
	}

	page {
		background-color: #F7F8FB;
	}
	
	
	/* 客服系统样式 */
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
	}
	
	.movableView {
		pointer-events: auto; //可以点击
		width: 200rpx;
		height: 200rpx;
		padding: 10rpx;
		border-radius: 100%;
	}
	
	.iconImage {
		display: block;
		width: 200rpx;
		// animation: iconImage 5s linear infinite;
	}
	
	@keyframes iconImage {
		0% {
			-webkit-transform: rotate(0deg);
		}
	
		25% {
			-webkit-transform: rotate(90deg);
		}
	
		50% {
			-webkit-transform: rotate(180deg);
		}
	
		75% {
			-webkit-transform: rotate(270deg);
		}
	
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	
	/* 客服 */
	.contact {
		width: 50px;
		height: 50px;
		overflow: hidden;
		position: absolute;
		left: 0px;
		top: 0px;
		border-radius: 100%;
		opacity: 0;
	}
	.shenfen_tit {
		font-size: 30rpx;
		font-weight: 600;
		color: #000;
		padding-top: 30rpx;
		text-align: center;
	}
	.shenfen_info {
		width: 650rpx;
	}
	.u-radio_shenfen {
		width: 600rpx;
		margin: auto;
	}
</style>